<template>
	<div class="contain">
		<nav-bar>
			<template v-slot:left>
				<img src="../../assets/images/left.png" alt="return icon">
			</template>
			<template v-slot:center>叮当图书商城</template>
		</nav-bar>
		
		<div class="wrapper">
			<div class="content">
				<!--			需要滚动的内容放这里-->
				<home-swipe :banners="banners" style="margin-top: 45px"></home-swipe>
				<recommend :recommend="recommend"/>
				<tab-control :list="['畅销','新书','精选']" :tabClick="tabClick"/>
				<goods :goods="showData"/>
			</div>
		</div>
		<back-top @bTop="bTop"></back-top>
	</div>


</template>

<!--主页组件-->
<script>

import {onMounted, ref, reactive, computed, watchEffect,nextTick} from "vue";

// 自定义组件
import {getHomeAllData, getHomegoods} from "@/network/Home";
import NavBar from "../../components/common/navbar/NavBar"; // 顶部导航栏
import Recommend from "./recommend/Recommend" // 首页推荐组件
import TabControl from "components/content/tabcontrol/TabControl"; // 首页显示切换组件
import Goods from "../../components/content/goods/Goods"; // 商品信息
import backTop from "components/common/backtop/backTop"; // 返回顶部标识
import HomeSwipe from "./homeSwipe/HomeSwipe"; // 首页轮播图
import BetterScroll from 'better-scroll' // 滚动工具



export default {
	name: 'Home',
	components: {
		NavBar,
		Recommend,
		TabControl,
		Goods,
		backTop,
		HomeSwipe
	},
	setup() {
		const recommend = ref([]) // 推荐数据
		let currentType = ref('sales') // 当前显示类型
		let scroll = reactive({}) // 滚动实例初始化
		let banners = ref([]) // 轮播图数据
		
		// 商品列表数据模型
		const goods = reactive({
			sales: {page: 0, list: []},
			new: {page: 0, list: []},
			recommend: {page: 0, list: []},
			
		})
		
		// Tabcontrol组件点击事件的emit
		const tabClick = (index) => {
			let types = ['sales', 'new', 'recommend']
			currentType.value = types[index]
		}
		
		// 使用计算属性返回将要显示的数据
		const showData = computed(() => {
			return goods[currentType.value].list
		})
		
		// 返回顶部事件
		const bTop = ()=>{
			scroll.scrollTo(0,0,1000) //x,y坐标和时间
		}
		
		onMounted(() => {
			// 实例化滚动条对象
			scroll = new BetterScroll(document.querySelector('.wrapper'), {
				scrollY: true, // 允许纵向滑动
				probeType: 3,// 0,1,2,3表示只要在运行就触发scroll事件
				click: true,// 是否允许点击
				pullUpLoad: true // 上拉加载更多,默认false
			})
			
			// 触发滚动事件
			scroll.on('scroll', (position) => {
			
			})
	
			// 触发上拉事件
			scroll.on('pullingUp',()=>{
				
				// 上拉则页数加一
				// let page = goods[currentType.value].page+1
				// getHomegoods(currentType.value,page).then(res=>{
				// 	goods[currentType.value].list.push(...res.goods.data)
				// 	goods[currentType.value].page +=1
				// }).catch()
				
			})
			
			//上拉完成
			scroll.finishPullUp()
			scroll.refresh() // 重新计算高度
			
			
			// 获取首页所有数据
			getHomeAllData().then(res => {
				recommend.value = res.goods.data
				banners.value = res.slides
			}).catch()
			
			//获取首页热销数据
			getHomegoods('sales').then((res) => {
				goods.sales.list = res.goods.data
			}).catch()
			
			// 获取首页推荐数据
			getHomegoods('recommend').then((res) => {
				goods.recommend.list = res.goods.data
			}).catch()
			
			//获取首页新品数据
			getHomegoods('new').then((res) => {
				goods.new.list = res.goods.data
			}).catch()
			
		})
		
		// 监视数据变化,有任何变化都会重新计算高度
		watchEffect(()=>{
			nextTick(()=>{
				scroll.refresh()
			})
		})
		return {
			recommend,
			tabClick,
			goods,
			showData,
			bTop,
			banners,
		}
	}
}
</script>
<style scoped>
.contain {
	height: 45px;
	position: relative;
}

.wrapper {
	
	position: absolute;
	top: 0;
	bottom: 50px;
	left: 0;
	right: 0;
	overflow: hidden;
	height: 100vh;
}

.content {
/*padding-bottom: 50px;*/
}

.banner, img {
	width: 100%;
	height: auto;
	
	
}
</style>
